<template>
  <div id="cluster_info">
    <ReturnPage />
    <el-tabs v-model="activeName">
      <!-- 集群模版配置 -->
      <el-tab-pane label="集群模版配置" name="first">
        <el-collapse v-model="activeNames" @change="handleChange">
          <el-collapse-item title="基础信息" name="1">
            <div class="content">
              <div class="info_item">
                模版名称： {{ clusterInfo.colonyTemplateName }}
              </div>
            </div>
          </el-collapse-item>
          <el-collapse-item title="集群拓扑" name="3">
            <div class="content topology">
              <div class="title_topo">
                {{ topoData.colonyTemplate.colonyTemplateName }}
              </div>
              <ul class="oul">
                <li
                  class="oli"
                  v-for="item in topoData.servletTemplateList"
                  :key="item.serviceTemplateId"
                >
                  <span
                    >{{ item.serviceTemplateName
                    }}<label class="lable" style="margin-left: 20px">
                      <svg-icon
                        iconClass="icon-error"
                        @click="delTopology(item.serviceTemplateId)"
                      ></svg-icon></label
                  ></span>
                </li>
                <li class="oli last">
                  <svg-icon iconClass="icon-add"></svg-icon
                  ><a
                    href="javaScript:void(0)"
                    @click="showTopologyForm"
                    style="color: #409eff"
                  >
                    添加服务模版</a
                  >
                </li>
              </ul>
            </div>
          </el-collapse-item>
        </el-collapse>
        <!-- temporary -->
        <!-- <el-button type="primary" class="mt10">编辑</el-button> -->
      </el-tab-pane>
      <!-- 集群模板实例 -->
      <el-tab-pane label="集群列表" name="second">
        <el-row class="mb20" style="width: 100%">
          <el-col :span="2">
            <el-button
              size="mini"
              type="primary"
              @click="batchSynchronization"
              :disabled="!multipleSelection.length"
            >
              批量同步
            </el-button>
          </el-col>
          <el-col :span="4" :offset="18">
            <el-input
              v-model="query.colonyName"
              placeholder="请输入集群名称搜索"
              suffix-icon="el-icon-search"
              clearable
              @keyup.enter.native="getClusterlistById"
            >
            </el-input>
          </el-col>
        </el-row>
        <div class="tp_box">
          <el-table
            :data="tableData"
            style="width: 100%"
            height="calc(100vh - 350px)"
            @selection-change="handleSelectionChange"
          >
            <el-table-column label="" type="selection"> </el-table-column>
            <el-table-column label="集群名称" prop="colonyName">
            </el-table-column>

            <el-table-column
              label="业务拓扑路径"
              prop="colonyPath"
              show-overflow-tooltip="ture"
            >
            </el-table-column>
            <el-table-column label="状态" prop="isSynchronize">
              <template slot-scope="scope">
                {{ scope.row.isSynchronize == 1 ? "已同步" : "待同步" }}
              </template>
            </el-table-column>
            <el-table-column label="创建时间" prop="addTime"> </el-table-column>
            <el-table-column
              label="上次同步时间"
              prop="isSynchronizeTime"
              show-overflow-tooltip="ture"
            >
            </el-table-column>
            <el-table-column label="操作">
              <template slot-scope="scope">
                <el-button
                  size="mini"
                  type="primary"
                  @click="handleSynchronization(scope.row.colonyId)"
                  >同步</el-button
                >
                <el-button
                  size="mini"
                  type="danger"
                  @click="handleDelete(scope.row.colonyId)"
                  >删除</el-button
                >
              </template>
            </el-table-column>
          </el-table>
          <pagination
            v-show="total > 0"
            :total="total"
            :page.sync="query.pageNum"
            :limit.sync="query.pageSize"
            :select-data-len="multipleSelection.length"
            @pagination="getList()"
          />
        </div>
      </el-tab-pane>
    </el-tabs>

    <!-- 新增编辑集群拓扑弹框 -->
    <el-dialog title="新增拓扑" :visible.sync="FormVisible" width="20%">
      <el-form ref="Form" :model="Form" :rules="rules">
        <el-form-item
          label="服务模版"
          prop="serviceTemplateId"
          label-width="80px"
        >
          <el-select
            v-model="Form.serviceTemplateId"
            style="width: 100%"
            placeholder="请选择服务模版"
            clearable
          >
            <el-option
              v-for="item in serviceList"
              :key="item.serviceTemplateId"
              :label="item.serviceTemplateName"
              :value="item.serviceTemplateId"
            ></el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="addOrEditTopology('Form')"
          >确 定</el-button
        >
        <el-button @click="FormVisible = false">取 消</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import {
  getClusterDetail_Api, //集群模板详情查询
  getClusterListById_Api, //根据集群模板id查询集群列表详情
  getClusterTopology_Api, //集群模板拓扑查询
  addClusterTopology_Api, //添加集群模板和服务模板关联
  delClusterTopology_Api, //删除集群模板和服务模板关联
  syncClusterTemplate_Api, //同步集群模板
  delColony_Api, //删除集群
  serviceTemplateList_Api, //服务模版列表查询
} from "@/api/configuration/business.js";
import {
  clearObj, //清空表单的值
} from "@/utils/index.js";
export default {
  data() {
    return {
      FormVisible: false, //控制添加编辑集群模版弹窗
      // 数据条数
      total: 20,
      //分页数据
      query: {
        pageNum: 1,
        pageSize: 10,
        colonyName: "",
      },
      multipleSelection: [],
      //集群模版实例列表数据
      tableData: [
        // {
        //   date: "2016-05-02",
        //   name: "testtt",
        //   num: 1,
        //   url: "demo体验业务 / 正式环境 / 门户网站 / testt / test",
        //   peple: "admin",
        //   state: "已同步",
        // },
      ],
      activeName: "first", //选中的tab
      activeNames: ["1", "2", "3"], //集群模版配置展开的项
      clusterInfo: {}, //基础信息
      topoData: {
        colonyTemplate: {
          colonyTemplateName: "",
        },
        servletTemplateList: [],
      },
      //服务模版数据
      serviceList: [],
      rules: {
        serviceTemplateId: [
          { required: true, message: "请选择服务模版", trigger: "change" },
        ],
      }, //表单验证规则
      Form: {}, //添加编辑集群拓扑表单
    };
  },
  methods: {
    //集群详情和详情列表查询
    getClusterDetail() {
      //详情
      getClusterDetail_Api(this.$route.query.colonyTemplateId).then((res) => {
        this.clusterInfo = res.data;
      });
    },
    //获取集群拓扑列表数据
    getTopologyList() {
      getClusterTopology_Api(this.$route.query.colonyTemplateId).then((res) => {
        this.topoData = res.data;
      });
    },
    //根据集群模板id查询集群列表
    getClusterlistById() {
      getClusterListById_Api(
        this.query,
        this.$route.query.colonyTemplateId
      ).then((res) => {
        this.tableData = res.rows;
        this.total = res.total;
      });
    },

    //同步
    handleSynchronization(id) {
      syncClusterTemplate_Api(id, this.topoData).then((res) => {
        this.$message.success(res.msg);
        this.getClusterlistById();
      });
    },
    //添加集群拓扑
    addOrEditTopology(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          this.Form.colonyTemplateId = this.$route.query.colonyTemplateId;
          addClusterTopology_Api(this.Form).then((res) => {
            this.$message.success(res.msg);
            this.getTopologyList();
            this.FormVisible = false;
          });
        } else {
          return false;
        }
      });
    },
    //集群拓扑删除
    delTopology(id) {
      this.$confirm("是否确认删除该服务模板?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(async () => {
          delClusterTopology_Api({
            serviceTemplateId: id,
            colonyTemplateId: this.$route.query.colonyTemplateId,
          }).then((res) => {
            this.$message.success(res.msg);
            this.getTopologyList();
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
    //服务模版列表查询
    serviceTemplateList() {
      serviceTemplateList_Api().then((res) => {
        this.serviceList = res.rows || [];
      });
    },
    //多选
    handleSelectionChange(val) {
      this.multipleSelection = val.map((item) => item.colonyId);
    },
    //批量同步
    batchSynchronization() {
      syncClusterTemplate_Api(
        this.multipleSelection.join(","),
        this.topoData
      ).then((res) => {
        this.$message.success(res.msg);
        this.getClusterlistById();
      });
    },
    //显示新增编辑集群拓扑弹框
    showTopologyForm() {
      clearObj(this.Form);
      this.FormVisible = true;
    },
    //删除
    handleDelete(id) {
      this.$confirm("是否确认删除该集群?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(async () => {
          delColony_Api(id).then((res) => {
            this.$message.success(res.msg);
            this.getClusterDetail();
            this.getClusterlistById(); //根据集群模板id查询集群列表
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
  },
  created() {
    this.getClusterDetail(); //集群详情和详情列表查询
    this.getTopologyList(); //获取集群拓扑列表
    this.serviceTemplateList(); //服务模版列表查询
    this.getClusterlistById(); //根据集群模板id查询集群列表
  },
};
</script>

<style lang="scss" scoped>
#service_detail ::v-deep .el-tabs {
  box-sizing: border-box;
  padding: 10px;
}
::v-deep .el-tabs__content {
  padding-bottom: 10px;
}
::v-deep .el-tabs .el-tab-pane .el-collapse .el-collapse-item {
  margin-bottom: 15px;
  border: none;
  border-radius: 5px;
  overflow: hidden;
  .el-collapse-item__header {
    border: none;
    padding-left: 10px;
    font-weight: 550;
  }
  .content {
    width: 80%;
    margin: 0 auto;
    &.topology {
      font-size: 15px;
      min-height: 50px;
      box-sizing: border-box;
      padding: 20px;
      border: 1px dashed #d1d3d8;
      .title_topo {
        padding-left: 30px;
        text-align: left;
        position: relative;
        &::before {
          content: "集";
          display: block;
          font-size: 12px;
          color: #ffffff;
          line-height: 25px;
          text-align: center;
          width: 25px;
          height: 25px;
          background-color: #97aed6;
          border-radius: 50%;
          position: absolute;
          left: 0px;
          z-index: 5;
        }
      }
      .oul {
        .oli {
          padding: 5px 70px;
          position: relative;
          &::before {
            content: "";
            display: block;
            width: 25px;
            height: 35px;
            border-left: 1px dashed #d1d3d8;
            border-bottom: 1px dashed #d1d3d8;
            position: absolute;
            left: 12px;
            top: -18px;
            z-index: 4;
          }
          &.last {
            padding-left: 45px;
          }
          span {
            position: relative;
            &::before {
              content: "模";
              display: block;
              font-size: 12px;
              color: #ffffff;
              line-height: 25px;
              text-align: center;
              width: 25px;
              height: 25px;
              background-color: #97aed6;
              border-radius: 50%;
              position: absolute;
              left: -30px;
            }
          }
          .lable {
            display: none;
          }
          &:hover .lable {
            display: inline-block;
          }
        }
      }
    }
    .info_item {
      margin-top: 10px;
    }
  }
}
::v-deep .el-collapse {
  border: none;
}
</style>
